<!--本页面由uniapp切片工具生成，uni-app切片-可视化设计工具(一套代码编译到7个平台iOS、Android、H5、小程序)，软件下载地址：http://www.ymznkf.com/new_view_669.htm -->
<template>
  <view>
    <!-- <view class="camera">
    </view>-->
    <view class="photo">
      <!-- <image mode="widthFix" :src="src"></image> -->
     <uni-list>
		    <uni-list-item v-for="(item, index) in imgArr" :key='index'>
				<image  :src="item" mode="aspectFit"></image>
			</uni-list-item>
		</uni-list>
    </view>

 <view class="buttons">
      <!-- <u-button @click="takePhoto" type="success">拍照</u-button> -->
      <u-button @click="getImg" type="success" style="flex:2;">照片</u-button>
      <u-button type="primary">智能识别</u-button>
      <u-button type="success" >计算时间差</u-button>
  </view>

<view class="footer">
<u-cell-group>
	<u-cell-item  title="选择监控画面的时间：" arrow-direction="down" @tap="showTimeSele">{{selectTimeValue}}</u-cell-item>
	<u-cell-item  title="拍照时北京时间：">{{nowTime}}</u-cell-item>
	<u-cell-item  title="时间差："></u-cell-item>
</u-cell-group>
</view>

 
    <e-picker-plus ref="picker" @confirm="timeConfirm" mode="YMDhms" :initOnOpen="true" />
  </view>
</template>

<script>
import uniList from "@/components/uni-list/uni-list.vue"         // uni-app列表组件，渲染图片列表
import uniListItem from "@/components/uni-list-item/uni-list-item.vue"        // 列表项组件

    
export default {
  data() {
    return {
      //时间控件
      nowTime:'',
      selectTimeValue:'',
      endTime: "",
      startTime: "",
      nowTimeStamp:null,
      selectTimeStamp:null,
      //图片组件
      imgArr: [],
    };
  },  
  created() {
const nowTime = this.$moment().format('YYYY-MM-DD HH:mm:ss');
const nowTimeStamp = this.$moment(nowTime).valueOf();
this.nowTime=nowTime
this.nowTimeStamp=nowTimeStamp
console.log(this.nowTimeStamp,'nowTimeStamp')
    // var c = this.$moment().format();
    // var b = this.$moment("2020-07-21 16:45:00");
    // var a = this.$moment(c);
    // console.log("相差", a.diff(b, "seconds", true), "秒"); //相差时间时间为秒
  },
  methods: {
    //时间选择change
    showTimeSele() {
      this.$refs.picker.show();
    },
    timeConfirm(e) {
      
      if (e.errorMsg) {
        uni.showModal({
          title: "警告",
          content: e.errorMsg
        });
      } else {
        this.selectTimeValue = e.result;
        this.selectTimeStamp = this.$moment(this.selectTimeValue).valueOf();
        console.log(this.$moment(this.selectTimeStamp).format('YYYY-MM-DD HH:mm:ss'),'选择时间差')
      }
    },
    //小程序的调用摄像头接口
    takePhoto() {
      const ctx = uni.createCameraContext();
      ctx.takePhoto({
        quality: "high",
        success: res => {
          this.src = res.tempImagePath;
        }
      });
    },
    error(e) {
      // console.log(e.detail);
    },
    //h5 与 app的摄像头
    getImg () {
				var that = this
				uni.chooseImage({
				    count: 6,           // 最多可以选择的图片张数，默认9
				    sizeType: ['original', 'compressed'],              //original 原图，compressed 压缩图，默认二者都有
				    sourceType: ['album', 'camera'],             //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
				    success: function (res) {
              that.imgArr = res.tempFilePaths
          
				    }
				});
			},
  }
};
</script>

<style lang="scss" scoped>
.camera,
.photo {
  display: inline-block;
  width: 100%;
  min-height: 600upx;
  padding: 2% 3%;
  margin-top: 2%;
  box-sizing: border-box;
  background-color: skyblue;
}
.photo img{
  width: 100%;
  height: 300px;
}
.buttons {
  display: flex;
  .u-btn {
    flex: 1;
    margin: 10upx;
  }
}
.cententView {
  display: flex;
}
button {
  margin: 10rpx;
  font-size: 30rpx;
}
video {
  margin-left: 50rpx;
  width: 300rpx;
  height: 300rpx;
  background-color: lavender;
}
image {
  margin-left: 50rpx;
  width: 650rpx;
  height: 500rpx;
  background-color: lavender;
}
</style>
